🧲 CSS :has() 선택자 활용

:has()는 CSS 최초로 자식/형제 요소의 상태를 보고 부모 요소를 선택할 수 있게 해주는 선택자입니다.

1️⃣ 기본 문법

/* 이미지가 포함된 카드에만 테두리 적용 */
.card:has(img) {
  border: 1px solid #ddd;
}

• 이전까지 CSS는 부모→자식 방향으로만 선택 가능했지만, :has()로 자식의 존재 여부에 따라 부모를 스타일링 가능해짐

2️⃣ 실전 예시 - 폼 유효성 스타일링

/* 유효하지 않은 input이 하나라도 있는 폼 전체에 스타일 적용 */
form:has(input:invalid) {
  border: 1px solid red;
}

/* 체크된 체크박스 다음의 형제 요소 스타일링 */
.item:has(input:checked) {
  background: #eef;
}

• 기존에는 JS로 클래스를 토글해야 했던 상황을 순수 CSS만으로 처리 가능

3️⃣ 주의할 점

• 브라우저 지원이 비교적 최근(2023년 이후 주요 브라우저)부터 시작되어, 구형 브라우저 지원이 필요하면 폴백이 필요
• 복잡한 :has() 조합은 가독성이 떨어질 수 있어, 조건이 복잡하면 클래스 토글 방식이 더 명확할 수 있음

✍️ 한 줄 정리

:has()는 자식/형제 요소의 상태를 보고 부모를 선택할 수 있게 해주는 선택자로, 기존에 JS로 처리하던 조건부 스타일링을 순수 CSS로 옮길 수 있게 해준다.